<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>照片裁剪工具</title>
    <link href="../css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="../css/cropper.min.css">
    <style>
        body {
            background-color: #f8f9fa;
            font-family: 'Microsoft YaHei', sans-serif;
        }

        .card {
            border-radius: 10px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            margin-bottom: 20px;
            border: none;
        }

        .card-header {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            border-radius: 10px 10px 0 0 !important;
            font-weight: bold;
        }

        .btn-primary {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            border-color: #667eea;
        }

        .btn-primary:hover {
            background: linear-gradient(135deg, #5568d1 0%, #653b8c 100%);
            border-color: #5568d1;
        }

        .preview-container {
            display: flex;
            flex-wrap: wrap;
            gap: 15px;
            margin-top: 20px;
            justify-content: center;
        }

        .preview-item {
            text-align: center;
        }

        .preview-img {
            border: 1px solid #ddd;
            border-radius: 5px;
            margin-bottom: 5px;
        }

        #image {
            max-width: 100%;
            max-height: 70vh;
        }

        .cropper-container {
            margin: 0 auto;
        }

        .size-option {
            padding: 8px 15px;
            margin: 5px;
            border-radius: 20px;
            background-color: #f1f1f1;
            cursor: pointer;
            display: inline-block;
        }

        .size-option.selected {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
        }

        .tool-section {
            margin-bottom: 20px;
        }

        /* 确认裁剪按钮样式 */
        #confirm-crop {
            background: linear-gradient(135deg, #6976de 0%, #7453ad 100%);
            color: #fff;
        }

        #confirm-crop:hover {
            background: linear-gradient(135deg, #7453ad 0%, #6976de 100%);
        }

        /* 取消裁剪按钮样式 */
        #cancel-crop {
            background: linear-gradient(135deg, #6c757d 0%, #adb5bd 100%);
            color: #fff;
        }

        #cancel-crop:hover {
            background: linear-gradient(135deg, #adb5bd 0%, #6c757d 100%);
        }

        /* 保存图片按钮样式 */
        #download {
            background: linear-gradient(135deg, #715bb9 0%, #0069d9 100%);
            color: #fff;
        }

        #download:hover {
            background: linear-gradient(135deg, #0069d9 0%, #715bb9 100%);
        }

        /* 模态框样式 */
        .modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            justify-content: center;
            align-items: center;
        }

        .modal-dialog {
            margin: auto;
            max-width: 400px;
        }

        .modal-content {
            border-radius: 10px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }

        /* 自定义尺寸输入框布局 */
        .custom-size-row {
            display: flex;
            gap: 10px;
            align-items: center;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="row">
            <div class="col-md-4">
                <div class="card">
                    <div class="card-header">
                        设置选项
                    </div>
                    <div class="card-body">
                        <div class="tool-section">
                            <h5>尺寸</h5>
                            <div>
                                <div class="size-option selected" data-width="295" data-height="413">一寸 (295×413px)</div>
                                <div class="size-option" data-width="413" data-height="579">二寸 (413×579px)</div>
                                <div class="size-option" data-width="354" data-height="472">小一寸 (354×472px)</div>
                                <div class="size-option" data-width="390" data-height="567">大一寸 (390×567px)</div>
                                <div class="size-option" id="custom-size-option">自定义尺寸</div>
                            </div>
                            <div id="custom-size-inputs" style="display: none;">
                                <div class="custom-size-row">
                                    <input type="number" id="custom-width" placeholder="宽度（px）" style="width:120px;">
                                    <input type="number" id="custom-height" placeholder="高度（px）" style="width:120px;">
                                    <button class="btn btn-primary" id="apply-custom-size">应用</button>
                                </div>
                            </div>
                        </div>

                        <div class="tool-section">
                            <h5>预览</h5>
                            <div class="preview-container">
                                <div class="preview-item">
                                    <img id="preview-1inch" class="preview-img" src="" width="100" height="140">
                                    <div>一寸预览</div>
                                </div>
                                <div class="preview-item">
                                    <img id="preview-2inch" class="preview-img" src="" width="140" height="200">
                                    <div>二寸预览</div>
                                </div>
                            </div>
                        </div>

                        <div class="d-flex justify-content-between">
                            <button id="confirm-crop" class="btn download-btn">
                                <i class="bi bi-check"></i> 确认裁剪
                            </button>
                            <button id="download" class="btn download-btn">
                                <i class="bi bi-download"></i> 保存图片
                            </button>
                            <button id="cancel-crop" class="btn download-btn">
                                <i class="bi bi-x"></i> 取消裁剪
                            </button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-8">
                <div class="card">
                    <div class="card-header">
                        图片裁剪
                    </div>
                    <div class="card-body text-center">
                        <div class="input-group mb-3">
                            <input type="file" class="form-control" id="upload" accept="image/*">
                            <button class="btn btn-outline-secondary" type="button" id="rotate-left" title="向左旋转">
                                <i class="bi bi-arrow-counterclockwise"></i> ↺
                            </button>
                            <button class="btn btn-outline-secondary" type="button" id="rotate-right" title="向右旋转">
                                <i class="bi bi-arrow-clockwise"></i> ↻
                            </button>
                        </div>
                        <div id="image-container" style="display: none;">
                            <img id="image" src="" alt="选择的图片">
                        </div>
                        <div id="upload-prompt" class="text-center py-5">
                            <i class="bi bi-cloud-arrow-up" style="font-size: 3rem; color: #6c757d;"></i>
                            <p class="mt-3">请选择您的照片</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 原有的提示模态框 -->
    <div class="modal fade" id="alertModal" tabindex="-1" aria-labelledby="alertModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="alertModalLabel">提示</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    请先选择图片
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 自定义模态框 -->
    <div class="modal fade" id="customAlertModal" tabindex="-1" aria-labelledby="customAlertModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="customAlertModalLabel">提示</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body" id="customAlertModalBody">
                    <!-- 提示信息将动态插入这里 -->
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
                </div>
            </div>
        </div>
    </div>

    <script src="../js/bootstrap.bundle.min.js"></script>
    <script src="../js/cropper.min.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            // 全局变量
            let cropper;
            let currentSize = { width: 295, height: 413 };
            let isCropConfirmed = false;
            let confirmedCropData;
            const alertModal = new bootstrap.Modal(document.getElementById('alertModal'));
            const customAlertModal = new bootstrap.Modal(document.getElementById('customAlertModal'));
            const customAlertModalBody = document.getElementById('customAlertModalBody');

            // 自定义 alert 函数
            function customAlert(message) {
                customAlertModalBody.textContent = message;
                customAlertModal.show();
            }

            // 选择图片
            const upload = document.getElementById('upload');
            const image = document.getElementById('image');
            const imageContainer = document.getElementById('image-container');
            const uploadPrompt = document.getElementById('upload-prompt');

            upload.addEventListener('change', function (e) {
                const files = e.target.files;
                if (files && files.length > 0) {
                    const file = files[0];
                    if (!file.type.match('image.*')) {
                        customAlert('请选择图片文件');
                        return;
                    }

                    const reader = new FileReader();
                    reader.onload = function (event) {
                        image.src = event.target.result;
                        imageContainer.style.display = 'block';
                        uploadPrompt.style.display = 'none';

                        // 初始化Cropper
                        if (cropper) {
                            cropper.destroy();
                        }

                        cropper = new Cropper(image, {
                            aspectRatio: currentSize.width / currentSize.height,
                            viewMode: 1,
                            autoCropArea: 0.8,
                            responsive: true,
                            guides: false,
                            background: false,
                            movable: true,
                            rotatable: true,
                            scalable: true,
                            zoomable: true,
                            cropBoxMovable: true,
                            cropBoxResizable: true
                        });
                    };
                    reader.readAsDataURL(file);
                }
            });

            // 旋转按钮
            document.getElementById('rotate-left').addEventListener('click', function () {
                if (cropper &&!isCropConfirmed) {
                    cropper.rotate(-90);
                }
            });

            document.getElementById('rotate-right').addEventListener('click', function () {
                if (cropper &&!isCropConfirmed) {
                    cropper.rotate(90);
                }
            });

            // 尺寸选择
            const sizeOptions = document.querySelectorAll('.size-option');
            sizeOptions.forEach(option => {
                option.addEventListener('click', function () {
                    if (isCropConfirmed) {
                        return;
                    }
                    sizeOptions.forEach(opt => opt.classList.remove('selected'));
                    this.classList.add('selected');

                    if (this.id === 'custom-size-option') {
                        document.getElementById('custom-size-inputs').style.display = 'block';
                    } else {
                        document.getElementById('custom-size-inputs').style.display = 'none';
                        const width = parseInt(this.dataset.width);
                        const height = parseInt(this.dataset.height);
                        currentSize = { width, height };

                        if (cropper) {
                            cropper.setAspectRatio(width / height);
                        }
                    }
                });
            });

            // 应用自定义尺寸
            document.getElementById('apply-custom-size').addEventListener('click', function () {
                if (isCropConfirmed) {
                    return;
                }
                const customWidth = parseInt(document.getElementById('custom-width').value);
                const customHeight = parseInt(document.getElementById('custom-height').value);

                if (!isNaN(customWidth) &&!isNaN(customHeight) && customWidth > 0 && customHeight > 0) {
                    currentSize = { width: customWidth, height: customHeight };
                    if (cropper) {
                        cropper.setAspectRatio(customWidth / customHeight);
                    }
                } else {
                    customAlert('请输入有效的宽度和高度');
                }
            });

            // 确认裁剪按钮
            document.getElementById('confirm-crop').addEventListener('click', function () {
                if (cropper) {
                    isCropConfirmed = true;
                    confirmedCropData = cropper.getData();
                    updatePreviews();
                }
            });

            // 取消裁剪按钮
            document.getElementById('cancel-crop').addEventListener('click', function () {
                if (cropper) {
                    isCropConfirmed = false;
                    confirmedCropData = null;
                    // 重置预览图片
                    document.getElementById('preview-1inch').src = '';
                    document.getElementById('preview-2inch').src = '';
                }
            });

            // 更新预览
            function updatePreviews() {
                if (!cropper ||!isCropConfirmed) return;

                // 获取裁剪后的canvas
                const canvas = cropper.getCroppedCanvas({
                    width: currentSize.width,
                    height: currentSize.height,
                    imageSmoothingEnabled: true,
                    imageSmoothingQuality: 'high',
                    data: confirmedCropData
                });

                if (canvas) {
                    // 更新预览图片
                    document.getElementById('preview-1inch').src = canvas.toDataURL('image/jpeg');

                    // 创建二寸预览 (基于当前尺寸比例)
                    const canvas2inch = document.createElement('canvas');
                    const ctx2inch = canvas2inch.getContext('2d');
                    const scale = 1.4; // 二寸比一寸大约1.4倍
                    canvas2inch.width = canvas.width * scale;
                    canvas2inch.height = canvas.height * scale;

                    // 绘制缩放后的图像
                    ctx2inch.drawImage(canvas,
                        0, 0, canvas.width, canvas.height,
                        0, 0, canvas2inch.width, canvas2inch.height);

                    document.getElementById('preview-2inch').src = canvas2inch.toDataURL('image/jpeg');
                }
            }

            // 下载按钮
            document.getElementById('download').addEventListener('click', function () {
                if (!cropper) {
                    alertModal.show();
                    return;
                }

                if (!isCropConfirmed) {
                    customAlert('请先确认裁剪');
                    return;
                }

                const canvas = cropper.getCroppedCanvas({
                    width: currentSize.width,
                    height: currentSize.height,
                    imageSmoothingEnabled: true,
                    imageSmoothingQuality: 'high',
                    data: confirmedCropData
                });

                if (canvas) {
                    const timestamp = new Date().getTime();
                    const link = document.createElement('a');
                    link.download = `${timestamp}.jpg`;
                    link.href = canvas.toDataURL('image/jpeg', 0.9);
                    link.click();
                }
            });
        });
    </script>
</body>

</html>